<template>
  <div>
    <el-container style="height: 920px; border: 1px solid #eee;margin-top: 0px;">
      <!--左 start-->
      <el-aside width="190px" style="background-color: #545c64">
        <el-menu router default-active="this.$route.path" class="el-menu-vertical-demo"
                 @open="handleOpen" @close="handleClose" @select="handleSelect"
                 background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"
                 style="text-align: left">

          <!--<el-menu-item index="/employee" style="margin-top: 70px;">
            <i class="el-icon-menu"></i>
            <span slot="title">员工信息管理</span>
          </el-menu-item>
          <el-submenu index="/drug">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>药品信息管理</span>
            </template>
            <el-menu-item index="/drugInfo">药品信息维护</el-menu-item>
            <el-menu-item index="/drugInstorage">入库管理</el-menu-item>
            <el-menu-item index="/drugOutstorage">出库管理</el-menu-item>
            <el-menu-item index="/drugInventory">库存管理</el-menu-item>
            <el-menu-item index="/drugStockTaking">库存盘点</el-menu-item>
            <el-menu-item index="/drugAdjustPrice">药品调价</el-menu-item>
          </el-submenu>-->

          <el-menu-item index="/assetsappraisal" style="margin-top: 70px">
            <i class="el-icon-document"></i>
            <span slot="title">资产评估</span>
          </el-menu-item>

          <el-menu-item index="/borrower">
            <i class="el-icon-document"></i>
            <span slot="title">用户(借款人)</span>
          </el-menu-item>

          <el-menu-item index="/loanapplication">
            <i class="el-icon-document"></i>
            <span slot="title">贷款申请</span>
          </el-menu-item>

          <el-menu-item index="/loanrepayment">
            <i class="el-icon-document"></i>
            <span slot="title">还款</span>
          </el-menu-item>

          <el-menu-item index="/interestrate">
            <i class="el-icon-document"></i>
            <span slot="title">利率</span>
          </el-menu-item>

          <el-menu-item index="/operators">
            <i class="el-icon-document"></i>
            <span slot="title">操作员</span>
          </el-menu-item>

          <el-menu-item index="/usermessage">
            <i class="el-icon-document"></i>
            <span slot="title">消息</span>
          </el-menu-item>

        </el-menu>

      </el-aside>
      <!--左 end-->
      <!--右 start-->
      <el-container>
        <el-header style="text-align: left;padding-left: 40px;font-size: 30px;">
          <strong>{{header}}</strong>
        </el-header>

        <el-main>
          <router-view></router-view>
        </el-main>

        <el-footer style="height: 5px;"></el-footer>
      </el-container>
    </el-container>
    <!--右 end-->
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    data() {
      return {
        header:'Header'
      }
    },
    methods: {
      /*导航菜单*/
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
        // alert("zhy="+key);
        if (key == "/operator") {
          this.header="操作员";
        }
        else if (key == "/assetsappraisal") {
          this.header="资产评估";
        }
        else if (key == "/borrower") {
          this.header="用户(借款人)";
        }
        else if (key == "/loanapplication") {
          this.header="贷款申请";
        }
        else if (key == "/loanrepayment") {
          this.header="还款";
        }
        else if (key == "/interestrate") {
          this.header="利率";
        }
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    },
    mounted(){
    }
  };
</script>

<style scoped>
  /*布局容器的样式*/
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  body > .el-container {
    margin-bottom: 40px;
  }
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>
